<template>
  <div class="app" >
    <div style="margin:20px 20px auto;background-color: white;height: 380px">
      <!--添加按钮和导出文件-->
      <div class="btn_add" style="margin-bottom: 10px">
        <Button type="primary" @click="showAdd" shape="circle">
          <Icon type="plus-round"></Icon>
          添加汽车
        </Button>
        <Button type="primary" shape="circle" @click="exportData()">
          <Icon type="ios-download-outline"></Icon>
          导出数据
        </Button>
      </div>
      <!--添加用户界面-->
      <Modal
        v-model="model2"
        title="汽车信息添加">
        <Form :model="Car" :label-width="80">
          <Form-item label="汽车类型：">
            <Input v-model="Car.type" placeholder="请输入汽车类型"></Input>
          </Form-item>
          <Form-item label="汽车名称：">
            <Input  v-model="Car.brand" placeholder="请输入汽车名称"></Input>
          </Form-item>
          <Form-item label="汽车情况：">
            <Input v-model="Car.status"  placeholder="请输入汽车情况"></Input>
          </Form-item>
          <Form-item label="汽车图片：">
            <Input v-model="Car.img" placeholder="请输入汽车图片"></Input>
          </Form-item>
          <Form-item label="备注：">
            <Input v-model="Car.memo" placeholder="备注"></Input>
          </Form-item>
        </Form>
        <div style="margin-left: 350px">
          <Button type="info" @click="addCar()">添加</Button> &nbsp;&nbsp;&nbsp;&nbsp;
          <Button type="dashed" @click="model2 = false">取消</Button>
        </div>
        <!--去除按钮-->
        <div slot="footer"></div>
      </Modal>
      <!--表单-->
      <div class="table_row"><Table stripe border width="1100" :context="self" :columns="columns7" :data="Cars" ref="table"></Table></div>
      <!--修改用户界面-->
      <Modal
        v-model="modal1"
        title="用户信息修改">
        <Form :model="pro" :label-width="80">
          <Form-item label="汽车类型：">
            <Input v-model="pro.type" placeholder="请输入汽车类型"></Input>
          </Form-item>
          <Form-item label="汽车名称：">
            <Input  v-model="pro.brand" placeholder="请输入汽车名称"></Input>
          </Form-item>
          <Form-item label="汽车情况：">
            <Input v-model="pro.status"  placeholder="请输入汽车情况"></Input>
          </Form-item>
          <Form-item label="汽车图片：">
            <Input v-model="pro.img" placeholder="请输入汽车图片"></Input>
          </Form-item>
          <Form-item label="备注：">
            <Input v-model="pro.memo" placeholder="备注"></Input>
          </Form-item>
        </Form>
        <div>
          <div style="margin-left: 350px">
            <Button type="info" @click="updateCar()">修改</Button> &nbsp;&nbsp;&nbsp;&nbsp;
            <Button type="dashed" @click="model1 = false">取消</Button>
          </div>
        </div>

        <!--去除按钮-->
        <div slot="footer"></div>
      </Modal>
    </div>
    <div style="margin-left: 25px">
      <!--分页-->
      <Page style="margin-top: 20px"  :total="dataCount" :page-size="pageSize" show-total class="paging" @on-change="Page" @on-page-size-change="pageSizes"></Page>
    </div>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        /*分页*/
        // 初始化信息总条数
        dataCount:0,
        // 每页显示多少条
        pageSize:6,
        /*回显的数据*/
        Cars:[{}],
        //标题
        columns7: [
          {
            title:'汽车编号',
            key:'id'
          },
          {
            title: '汽车类型',
            key: 'type',
          },
          {
            title: '汽车名称',
            key: 'brand'
          },
          {
            title:'汽车情况',
            key:'status'
          },
          {
            title: '汽车图片',
            key: 'img'
          },
          {
            title: '备注',
            key:'memo'
          },
          {
            title: '操作',
            slot: 'action',
            width: 150,
            align: 'center',
            render: (h, data) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small',
                  },
                  on: {
                    click: () => {
                      this.show(data.row.id)
                    }
                  }
                }, '修改'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.remove(data.row.id)
                    }
                  }
                }, '删除')
              ]);
            }
          }
        ],
        /*后台拿到的数据*/
        Date:[{}],

        /*权限*/
        modal1:false,
        model2:false,
        self: this,
        Car:{},
        pro:{},
      };
    },
    methods: {

      /*导出数据*/
      exportData() {
        this.$refs.table.exportCsv({
          filename: 'data'
        });
      },
      /*查询所有用户*/
      findAll(){//查询所有
        let _this = this
        this.$axios.get("http://localhost:8089/car/getCar").then(function(res){
          _this.dataCount = res.data.length
          if(res.data.length < _this.pageSize){
            _this.Cars = res.data
            _this.Date = res.data
          }else {
            _this.Cars = res.data.slice(0,_this.pageSize);
            _this.Date = res.data
          }
          console.log(_this.Cars)
        }).catch(function (err) {
          alert('查询失败')
        })
      },

      /*分页*/
      Page(index){
        let _start = ( index - 1 ) * this.pageSize;
        let _end = index * this.pageSize;
        this.Cars = this.Date.slice(_start,_end);
      },
      pageSizes(pageSize){
        this.pageSize = pageSize;
        this.findAll()
      },
      /*打开添加用户界面*/
      showAdd(){
        this.model2 = true
      },
      /*添加用户*/
      addCar(){
        if(!this.Car.type){alert('请输入汽车类型');return false}
        if(!this.Car.brand){alert('请输入汽车名称');return false}
        if(!this.Car.status){alert('请输入汽车车况');return false}
        if(!this.Car.img){alert('请输入汽车图片');return false}
        if(!this.Car.memo){alert('请输入备注');return false}
        console.log(this.Car)
        let _this = this
        this.$axios.post("http://localhost:8089/car/setCar",this.Car).then(function () {
          //清空本次保存数据
          alert("汽车信息添加成功！")
          _this.Car = {};
          _this.dialogFormVisible = false
          _this.findAll();
        }).catch(function (err) {
          alert("汽车信息添加失败，请稍后再试")
        })
      },
      /*打开修改界面，根据id查询用户*/
      show(index) {
        this.modal1 = true
        let _this = this
        this.$axios.get("http://localhost:8089/car/getCarById/"+index).then(function(res){
          _this.pro = res.data
          console.log(res.data)
        }).catch(function (err) {
          alert('查询失败')
        })
      },
      /*更新用户*/
      updateCar(){
        let _this = this
        // 发送axios请求，根据查询一个
        this.$axios.post("http://localhost:8089/car/updateCar",_this.pro).then(function (res) {
          alert('汽车信息修改成功!')
          _this.modal1 = false
          _this.findAll();
        }).catch(function (err) {
        })
      },
      /*删除用户*/
      remove(id) {
        let _this = this
        console.log(id)
        if(window.confirm('确定要删除汽车吗？')){
          // 发送axios请求，根据查询一个
          this.$axios.post("http://localhost:8089/car/deletedById/"+id).then(function () {
            _this.findAll();
            alert("汽车删除成功！")
          }).catch(function (err) {
            console.log(id)
            alert("删除失败,请联系管理员！")
          })
        }
      },
    },
    //初始化阶段 brforeCreate 内部事件 生命周期
    created(){
      this.findAll();

    }
  };
</script>

<style scoped>


</style>
